<template>
  <div id="recruit">

    <div class="recTop">
      <div id="search-input">
        <el-select style="width: 120px" v-model="selectProVin" @visible-change="getPro" placeholder="请选择">
          <el-option
              v-for="item in provinces"
              :key="item.adcode"
              :label="item.name"
              :value="item.name">
          </el-option>
        </el-select>
        <el-input @keyup.enter.native="getData" v-model="keywords" style="width: 80%" placeholder="搜索职位"></el-input>
        <el-button @click="getData" type="danger">搜索</el-button>
      </div>
      <div id="city-list">
        <i class="el-icon-office-building">市:</i>
        <div v-if="cities.length==0">
          <span>无对应市级</span>
        </div>
        <span v-else :class="{'active-city':selectCity==city.name}" @click="selectCity=city.name" v-for="city in cities">{{city.name}}</span>


      </div>
      <div id="area-list">
        <i class="el-icon-aim">地区:</i>
        <div v-if="areas.length==0">
          <span>无对应区县</span>
        </div>
        <div v-else>
          <span  :class="{'active-area':selectArea==area.name}" @click="selectArea=area.name" v-for="area in areas">{{area.name||'无二级选项噢~'}}</span>
        </div>

      </div>
      <div id="screening">
        <div class="sc-type">
          <span>分类</span>
          <el-dropdown @command="handleCommand1">
  <span class="el-dropdown-link">
    {{workType.name}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item  v-for="item in workTypeList" :command="item">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="sc-type">
          <span>经验要求</span>
          <el-dropdown @command="handleCommand2">
  <span class="el-dropdown-link">
    {{workEx.name}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in workExList" :command="item">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="sc-type">
          <span>学历要求</span>
          <el-dropdown @command="handleCommand3">
  <span class="el-dropdown-link">
    {{workEdu.name}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in workEduList" :command="item">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="sc-type">
          <el-button @click="clear()" size="mini">清除筛选</el-button>
        </div>

      </div>
    </div>


    <div class="rec-bottom">
      <div :class="type=='university'?'recList-uni':'recList'" >
        <div style="background:white;height: 460px" v-if="jobList.length==0">
          <img width="100%"  src="@/assets/img/blank.png" alt="">
        </div>

        <div v-else :class="type=='university'?'recListCon-uni':'recListCon'"  >
          <rec-box1 :jobs="item" v-for="item in jobList"></rec-box1>
        </div>


      </div>

      <div v-if="$store.getters['user/getUser'].uType!='university'" class="resume">
        <mycard></mycard>
        <tool></tool>
<!--        <annex></annex>-->
      </div>
    </div>

  </div>
</template>


<script>
import RecBox1 from "@/components/content/RecBox1";
import {provinceAndCityData} from "element-china-area-data";
import {getProvinces} from "@/api/map";
import Mycard from "@/views/Home/Recruitment/mycard";
import Tool from "./tool"
import Annex from "@/views/Home/Recruitment/annex";
import {searchRec} from "@/api/recruitment";
import {getPosition} from "@/untils/getPosition";
import axios from "axios";
export default {
  name: "index",
  components: {Annex, Tool,Mycard, RecBox1},
  created() {
    getProvinces("中国").then(res=>{
      this.provinces=res
      this.provinces.unshift({adcode:999,name:'全部'})
      this.selectProVin=res[0].name
    })
  },
  mounted() {
    console.log(this.$route.params,'参数')
    let keyWords=this.$route.params.keyWords
    if(keyWords){
      this.keywords=keyWords
    }
    this.getData()
  },
  computed:{
    address(){
      let pro=this.selectProVin
      let city=this.selectCity
      let area=this.selectArea
      if (pro=='全部'){
        return ''
      }else if(city=='全部'){
        return pro
      }else if(area=='全部'){
        return pro+city
      }else {
        return pro+city+area
      }
    }
  },
  data(){
    return{
      page:{
        current:1,
        pages:3,
        total:36
      },
      workType:{value:'',name:'全部'},
      workEx:{value:'',name:'全部'},
      workEdu:{value:'',name:'全部'},
      workTypeList:[
        {value:'',name:'全部'},
        {value:'互联网',name:'互联网'},
        {value:'建筑',name:'建筑'},
        {value:'设计',name:'设计'},
        {value:'金融',name:'金融'},
      ],
      workExList:[
        {value:'',name:'全部'},
        {value:'不限',name:'不限'},
        {value:'一年以上',name:'一年以上'},
        {value:'两年以上',name:'两年以上'},
        {value:'三年以上',name:'三年以上'},
        {value:'五年以上',name:'五年以上'},],
      workEduList:[
        {value:'',name:'全部'},
        {value:'不限',name:'不限'},
        {value:'高中',name:'高中'},
        {value:'大专',name:'大专'},
        {value:'本科',name:'本科'},
        {value:'研究生',name:'研究生'},
      ],
      keywords:'',
      cityActive:0,
      selectProVin:'',
      provinces:[],
      cities:[],
      selectCity:'',
      selectArea:'',
      areas:[],
      select:'请选择',
      input1: '',
      input2: '',
      input3: '',
      jobList:[],
      type:this.$store.getters["user/getUser"].uType
    }
  },
  watch:{
    selectCity:function(){
      if(this.selectCity=='全部'){
        this.areas=[]
        this.getData()
      }else {
        this.getAreas()
        this.getData()
      }

    },
    selectProVin:function (){
      if(this.selectProVin=='全部'){
        this.cities=[]
        this.areas=[]
        this.getData()
      }else{
        this.getCity()
        this.getData()
      }
    },
    workType:function (){
      this.getData()
    },
    workEdu:function (){
      this.getData()
    },
    workEx:function (){
      this.getData()
    },
    selectArea:function (){
      this.getData()
    }

  },
  methods:{
    currentChange(val){
      this.getData(val)
    },
    getData(){
      searchRec(this.address,this.workEdu.value,this.keywords,this.workType.value,this.workEx.value).then(res=>{
        console.log(res)
        this.jobList=res.data.extend.recruitmentList
      })
    },
    //分类的事件
    handleCommand1(command) {
      this.workType=command
    },
    //经验的事件
    handleCommand2(command) {
      this.workEx=command
    },
    //学历的事件
    handleCommand3(command) {
      this.workEdu=command
    },
    clear(){
      this.workEdu=this.workEx=this.workType={value:'',name:'全部'}
      this.keywords=''
      this.getData()
    },
    getPro(){
      getProvinces("中国").then(res=>{
        this.provinces=res
        this.provinces.unshift({adcode:999,name:'全部'})
      })
    },
    getCity(){
      getProvinces(this.selectProVin).then(res=>{
        this.cities=res
        this.cities.unshift({adcode:997,name:'全部'})
        this.selectCity=this.cities[0].name
      })
    },
    getAreas(){
      getProvinces(this.selectCity).then(res=>{
        this.areas=res
        this.areas.unshift({adcode:996,name:'全部'})
        this.selectArea=this.areas[0].name
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
#search-input
  width 95%
  display flex
  justify-content space-between

#recruit
  margin-top 10px
  width 100%
  display flex
  flex-direction column
  justify-content space-between
.recTop
  width 100%
  height 150px
  padding 5px
  background white
  display flex
  flex-direction column
  justify-content space-between
  position sticky
  top -110px
  box-shadow 1px 1px 3px #eadbdb
.rec-bottom
  margin-top 10px
  width 100%
  display flex
  justify-content space-between
.recList
  width 75%
.recList-uni
  width 100%
.recListCon
  width 100%
  display grid
  grid-template-columns repeat(3, 1fr)
  grid-gap 5px
.recListCon-uni
  width 100%
  display grid
  grid-template-columns repeat(4, 1fr)
  grid-gap 5px
.resume
  width 24%
  height 460px
  background white
#city-list,#area-list
  display flex
  align-items center
  flex-wrap wrap
  width 100%
  &>div
    display flex
    align-items center
    flex-wrap wrap
  & span
    color rgb(163,163,163)
    position relative
    font-size 14px
    border-radius 10px
    margin-right 5px
    flex none
    cursor pointer
    transition all .2s
    padding 0 2px
    animation left ease-out .2s
    &:hover
      background #f5f1ec
      color #2696ee
@keyframes left{
  0%{
    left 20px
  }
  100%{
    left 0
  }
}
.active-city,.active-area
  background rgb(64,158,255)
  color white !important
#screening
  font-size 14px
  display flex
  align-items center
.el-dropdown
  width 80px
  display flex
  justify-content center
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.sc-type
  display flex
  width 200px
  align-items center
#Pagination
  display flex
  justify-content center
</style>
